<template>
    <div class="w-full h-12.3rem ">
        <Transition name="fade">
            <div class="bg-#222A3B w-72.3rem h-7.1rem flex items-center rounded-6.3rem px-4rem absolute -top-8rem left-0 right-0 m-auto"
                v-show="fanShow">
                <SvgIcon class="w-2.1rem h-2.1rem text-white cursor-pointer" local-icon="fan" />
                <n-slider v-model:value="fanProgress" :step="0.1" :tooltip="false" class="gradient-slider mx-2.8rem"
                    @mousedown="dragStart" @mouseup="dragEnd" @update:value="fanDrageing" @touchstart="dragStart"
                    @touchend="dragEnd">
                    <template #thumb>
                        <SvgIcon class="w-0.1rem h-0.1rem relative" local-icon="music-progress" />
                    </template>
                </n-slider>
                <SvgIcon class="w-2.8rem h-2.8rem text-white cursor-pointer" local-icon="fan" />
            </div>
        </Transition>
        <!-- <img :src="BottomBgPng" class=" absolute top-0 left-0 right-0 bottom-0"> -->
        <div class="absolute top-0 left-0 right-0 bottom-0 w-full  flex items-center justify-center z-1">
            <SvgIcon class="w-130.4rem h-12.3rem" local-icon="bottom-bg" />
        </div>

        <div class="w-130.4rem flex items-center h-12.3rem justify-around relative z-2  m-auto">
            <div class="w-34rem flex items-center justify-around">
                <div class="w-6px" @click="goPage('car')">
                    <SvgIcon class="w-4.8rem h-4.8rem text-white cursor-pointer" local-icon="tesla" />
                </div>
                <div class="w-6px" @click="goPage('map')">
                    <SvgIcon class="w-2.9rem h-3.2rem text-white cursor-pointer" local-icon="navicat" />
                </div>
            </div>

            <div class="flex-1 flex items-center h-full justify-around ">
                <div class="w-4.8rem" @touchstart="handlePressFanStart" @touchend="handlePressFanEnd">
                    <SvgIcon v-if="!fanOpen" class="w-4.8rem h-4.8rem text-white cursor-pointer" local-icon="fan" />
                    <SvgIcon v-else class="w-4.8rem h-4.8rem text-white cursor-pointer" local-icon="fan-select" />
                </div>
                <div class="w-4.8rem">
                    <Adjust @down="setTemperature('primary', 'down')" @up="setTemperature('primary', 'up')">
                        <div class="text-4.3rem">{{ temperaturePrimary }}º</div>
                    </Adjust>
                </div>
                <div class="w-8rem" @click="goPage('home')">
                    <SvgIcon class="w-8rem h-8rem text-white cursor-pointer" local-icon="person" />
                </div>
                <div class="w-4.8rem">
                    <Adjust @down="setTemperature('second', 'down')" @up="setTemperature('second', 'up')">
                        <div class="text-4.3rem">{{ temperatureSecond }}º</div>
                    </Adjust>
                </div>
                <div class="w-4.8rem" @click="toggleDefrost">
                    <SvgIcon v-if="!defrostOpen" class="w-4.8rem h-4.8rem text-white cursor-pointer"
                        local-icon="defrost" />
                    <SvgIcon v-else class="w-4.8rem h-4.8rem text-white cursor-pointer" local-icon="defrost-activate" />
                </div>
            </div>
            <div class="w-34rem  flex items-center justify-around ">
                <div class="w-4.1rem" @click="goPage('music')">
                    <SvgIcon class="w-4.1rem h-4.1rem text-white cursor-pointer" local-icon="music" />
                </div>
                <div class="w-3.5rem" @click="goPage('setting')">
                    <SvgIcon class="w-3.8rem h-3.8rem text-white cursor-pointer" local-icon="setting" />
                </div>
            </div>

        </div>
    </div>

</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Adjust from './common/adjust.vue';
import { eventSetting, SettingAction, SettingAdjustEventID, SettingWidget, SettingBtnEventID, SettingSliderEventID } from '@/hooks/business/eventListen/settingEventListen'
import { dragSwipeStartFn, dragSwipeEndFn } from "@/hooks/business/drag";
import { touchEventData } from '@/hooks/business/eventListen/event';

import { NavacationAction, eventNavagation, NavagationMenuEventID, NavagationWidget } from '@/hooks/business/eventListen/navagationEventListen';
interface Emits {
    (e: 'pushUrl', url: string): void;
}
const emit = defineEmits<Emits>();


let fanTimer: NodeJS.Timeout | null = null;
const fanOpen = ref(false)
const fanShow = ref(false)
const fanProgress = ref(50)
const defrostOpen = ref(false)
const temperaturePrimary = ref(21)
const temperatureSecond = ref(21)
const pressTimer = ref<NodeJS.Timeout | null>(null);

// 设置空调温度
function setTemperature(pos: string, type: string) {
    if (pos === 'primary') {
        temperaturePrimary.value = type === 'down' ? temperaturePrimary.value - 1 : temperaturePrimary.value + 1
        if (type === "up") {
            eventSetting(SettingAction.Click, SettingWidget.SettingAdjust, SettingAdjustEventID.mainAcUp, temperaturePrimary.value.toString())
        } else {
            eventSetting(SettingAction.Click, SettingWidget.SettingAdjust, SettingAdjustEventID.mainAcDown, temperaturePrimary.value.toString())
        }
    }
    if (pos === 'second') {
        temperatureSecond.value = type === 'down' ? temperatureSecond.value - 1 : temperatureSecond.value + 1
        if (type === "up") {
            eventSetting(SettingAction.Click, SettingWidget.SettingAdjust, SettingAdjustEventID.passengerAcUp, temperatureSecond.value.toString())
        } else {
            eventSetting(SettingAction.Click, SettingWidget.SettingAdjust, SettingAdjustEventID.passengerAcDown, temperatureSecond.value.toString())
        }
    }
}

// 开启空调
function openFan() {
    fanOpen.value = !fanOpen.value
    eventSetting(SettingAction.Click, SettingWidget.SettingBtn, SettingBtnEventID.fan, fanOpen.value.toString())

}

function showFanFn() {
    fanShow.value = true
    if (fanTimer) {
        clearTimeout(fanTimer)
        fanTimer = null
    }
    fanTimer = setTimeout(() => {
        fanShow.value = false
    }, 3000)
}
let isLongPress = false;
function handlePressFanStart() {
    if (pressTimer.value) clearTimeout(pressTimer.value);
    isLongPress = false
    pressTimer.value = setTimeout(() => {
        isLongPress = true
        showFanFn();
        eventSetting(SettingAction.LongClick, SettingWidget.SettingBtn, SettingBtnEventID.fan, fanShow.value.toString())
    }, 800); // 800ms为长按阈值，可自行调整
}

function handlePressFanEnd() {
    if (!isLongPress) {
        openFan();
    }
    if (pressTimer.value) {
        clearTimeout(pressTimer.value);
        pressTimer.value = null;
    }
}

// 切换热吹风
function toggleDefrost() {
    defrostOpen.value = !defrostOpen.value
    eventSetting(SettingAction.Click, SettingWidget.SettingBtn, SettingBtnEventID.glassBlow, defrostOpen.value.toString())
}


// 风量滑动中
function fanDrageing() { showFanFn() }


// 跳转页面
function goPage(url: string) {
    emit('pushUrl', url)
    if (url === 'car') {
        eventNavagation(NavacationAction.Click, NavagationWidget.NavagationMenu, NavagationMenuEventID.NavagationMenuCar);
    } else if (url === 'map') {
        eventNavagation(NavacationAction.Click, NavagationWidget.NavagationMenu, NavagationMenuEventID.NavagationMenuMap);
    }
    else if (url === 'home') {
        eventNavagation(NavacationAction.Click, NavagationWidget.NavagationMenu, NavagationMenuEventID.NavagationMenuHome);
    }
    else if (url === 'music') {
        eventNavagation(NavacationAction.Click, NavagationWidget.NavagationMenu, NavagationMenuEventID.NavagationMenuMusic);
    }
    else if (url === 'setting') {
        eventNavagation(NavacationAction.Click, NavagationWidget.NavagationMenu, NavagationMenuEventID.NavagationMenuSetting);
    }
}

function dragStart(e: TouchEvent) {
    showFanFn()
    dragSwipeStartFn(e)
}
function dragEnd(e: TouchEvent,) {
    dragSwipeEndFn(e, (data: touchEventData) => {
        if (data.type === 'swipe') {
            data.componentValue = fanProgress.value;
            eventSetting(SettingAction.Swipe, SettingWidget.SettingSlider, SettingSliderEventID.fanSlider, data);
        }
    })
}
</script>

<style lang="scss" scoped>
.gradient-slider {
    :deep(.n-slider-rail) {
        background: rgba(255, 255, 255, 0.1);
        height: 1.9rem;
        border-radius: 6.3rem !important;
        overflow: hidden;
    }

    :deep(.n-slider-rail__fill) {
        background: linear-gradient(90deg, #0532FB 0%, #52E6FB 100%);
        border-radius: 6.3rem !important;
        /* 设置渐变效果 */
    }
}

/* 定义淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>